<template>
  <div class='my-groom'>
    <div class="rule pr">
      <p class="head">
        <span class="dot"></span>
        <span class="color-gold">推荐有礼规则</span>
        <span class="dot"></span>
      </p>

      <p v-for="(item,index) in ruleData" class="rule-option"><span class="number">{{index+1}}</span> {{item}}</p>
    </div>

    <div class="rule pr">
      <p class="head">
        <span class="dot"></span>
        <span class="color-gold">推荐类型</span>
        <span class="dot"></span>
      </p>
      <p v-for="(item,index) in chooseData" class="rule-option choose-option" @click="setType(item)"><span class="number"><img :src="item.active?imgs.choose1:imgs.choose" alt=""></span> {{item.label}}</p>
    </div>

    <div class="rule pr padding0">
      <p class="head">
        <span class="dot"></span>
        <span class="color-gold">被推荐人信息</span>
        <span class="dot"></span>
      </p>
      
      <Form :formData="formData" :formParam="formParam" class="margintop20"></Form>
    </div>
    
    <Buttons class="margin30" :buttonData="buttonData"></Buttons>
  </div>
</template>
<script>
import Form from '../../../common/form'
import Buttons from '../../../common/button.vue'
export default {
  components: {Form,Buttons},
  name: "",
  data() {
    return {
      imgs:{
        choose:require('../../../../assets/img/hpmepage/renew/choose.png'),
        choose1:require('../../../../assets/img/hpmepage/renew/choose_1.png')
      },
      ruleData:[
        "推荐朋友车辆来店保养保险，有额外赠送礼品；",
        "被推荐人来店凭推荐短信，享有折扣优惠"
      ],
      chooseData:[
        {
          label:"保险",//0
          active:true
        },{
          label:"保养维修",//1
          active:false
        }
      ],
      formData:[
        {
          title:{
            show:false,
          },
          children:[
            {type:"input",label:"姓名",key:"name",},
            {type:"number",label:"电话",key:"phone",},
          ],
        }
      ],
      formParam:{
        type:"0",
      },
      buttonData:[
        {
          label:"提交",
          click:this.save
        }
      ]
    };
  },
  methods: {
    save(){
      if(!this.formParam.name){
        _g.toMessage({status:1,msg:"姓名不能为空"})
        return
      }
      if(!/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(this.formParam.phone)){
        _g.toMessage({status:1,msg:"手机号码格式有误"})
        return
      }
      _g.apiPost("others/getRecommand.do",this.formParam).then(res=>{
        _g.toMessage(res)
      })
    },

    // 设置类型
    setType(item){
      this.chooseData.forEach(ele=>{ele.active=false})
      this.$set(item,"active",true)
      this.$set(this.formParam,"type",this.formParam.type==0?1:0)
    },
    
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.my-groom {
  margin: 15px;
  padding-top: 10px;

  .rule{
    // min-height: 80px;
    box-sizing: border-box;
    border: 1px dashed #FFA200;
    margin-bottom: 25px;
    padding: 20px 0 ;

    p.rule-option{
      font-size: 14px;
      color: #333;
      text-indent: 10px;
      line-height: 20px;

      .number{
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 17px;
        background-color: #FFA200;
        color: #fff;
        text-align: center;
        text-indent: 0;
        border-radius: 50%;

        img{
          float: left;
          width: 100%;
          height: 100%;
          transform: translateY(2px)
        }
      }
    }
    p.choose-option {
      color: #666;
      line-height: 20px;
      .number{
        background: transparent;
      }
    }

    .head{
      position: absolute;
      padding: 0 5px;
      transform: translate(10px,-50%);
      background-color: #fff;
      top: -1px;
      text-indent: 0;
      font-size: 16px;

      span{
        vertical-align: middle;
      }
      .dot{
        display: inline-block;
        padding: 2px;
        border-radius: 50%;
        background-color: #FF6613;
      }
    }
    .margintop20{
      margin-top: 10px;
    }
  }

  .padding0{
    padding-top: 10px;
  }


  .margin30{
    margin: 30px 15px;
  }

}
</style>